<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{6 | addZero}}</p>
        <p v-bind:title="2 | addZero">hello</p>

        <!-- 
            1.可以为过滤器传递多个参数，此时需要使用小括号，操作的目标数据始终会自动作为第一个参数传入
            2.过滤器可以串联使用
         -->
        <p>{{3.1415926 | round(3) | addZero}}</p>

        <p>{{currentTime | formatDate}}</p>
    </div>
</body>
<script>
    /**
     * 全局过滤器
     *   注：全局过滤器必须在Vue实例构建之前定义
     */
    Vue.filter('formatDate',function(target){ // 格式化日期
        if(!(target instanceof Date)){
            return target;
        }
        var year=target.getFullYear();
        var month=target.getMonth()+1;
        var day=target.getDate();
        var hour=target.getHours();
        var minute=target.getMinutes();
        var second=target.getSeconds();

        return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
    }); 

    new Vue({
        el:'#app',
        data:{
            currentTime:new Date()
        },
        filters:{ // 局部过滤器
            addZero:function(target){ // 默认会自动将处理的目标数据作为参数传入
                // console.log(target);
                return target<10 ? '0'+target :  target; // 返回处理后的数据
            },
            round:function(target,n){ // 可以接收多个参数
                return target.toFixed(n);
            }
        }
    });
</script>
</html>